<template>
  <div>
<!-- 主内容区域 -->
<div class="main-content">
  <div class="page-title">安全设置</div>

  <!-- 安全设置卡片 -->
  <div class="security-card">
    <!-- 密码管理 -->
    <div class="security-section">
      <div class="section-title">密码管理</div>

      <div class="security-item">
        <div class="item-info">
          <div class="item-icon">
            <i class="fa-solid fa-key"></i>
          </div>
          <div class="item-content">
            <div class="item-title">修改登录密码</div>
            <div class="item-desc">设置强度更高的密码，保障账号安全</div>
          </div>
        </div>
        <el-button type="primary" size="small" @click="showPasswordForm = true">修改</el-button>
      </div>

      <!-- 密码修改表单 -->
      <div class="password-form" v-if="showPasswordForm">
        <el-form :model="passwordForm" label-width="120px" ref="passwordFormRef" :rules="passwordRules">
          <el-form-item label="当前密码" prop="oldPassword">
            <el-input v-model="passwordForm.oldPassword" type="password"></el-input>
          </el-form-item>

          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" type="password"></el-input>
          </el-form-item>

          <el-form-item label="确认新密码" prop="confirmPassword">
            <el-input v-model="passwordForm.confirmPassword" type="password"></el-input>
          </el-form-item>

          <el-form-item>
            <div class="form-actions">
              <el-button type="primary" @click="handleChangePassword">保存</el-button>
              <el-button @click="showPasswordForm = false">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 登录管理 -->
    <div class="security-section">
      <div class="section-title">登录管理</div>

      <div class="security-item">
        <div class="item-info">
          <div class="item-icon">
            <i class="fa-solid fa-mobile-screen-button"></i>
          </div>
          <div class="item-content">
            <div class="item-title">手机验证</div>
            <div class="item-desc">已绑定 138****8000</div>
          </div>
        </div>
        <el-button type="text" size="small" @click="handleBindPhone">修改</el-button>
      </div>

      <div class="security-item">
        <div class="item-info">
          <div class="item-icon">
            <i class="fa-solid fa-envelope"></i>
          </div>
          <div class="item-content">
            <div class="item-title">邮箱验证</div>
            <div class="item-desc">已绑定 example@example.com</div>
          </div>
        </div>
        <el-button type="text" size="small" @click="handleBindEmail">修改</el-button>
      </div>

      <div class="security-item">
        <div class="item-info">
          <div class="item-icon">
            <i class="fa-solid fa-shield-check"></i>
          </div>
          <div class="item-content">
            <div class="item-title">双重验证</div>
            <div class="item-desc">使用手机验证码增强账号安全</div>
          </div>
        </div>
        <el-switch v-model="doubleVerification" active-text="已开启" inactive-text="已关闭"></el-switch>
      </div>

      <div class="security-item">
        <div class="item-info">
          <div class="item-icon">
            <i class="fa-solid fa-laptop"></i>
          </div>
          <div class="item-content">
            <div class="item-title">登录设备管理</div>
            <div class="item-desc">查看并管理当前登录的所有设备</div>
          </div>
        </div>
        <el-button type="text" size="small" @click="showDevices = true">查看</el-button>
      </div>

      <!-- 登录设备列表 -->
      <div class="device-list" v-if="showDevices">
        <div class="device-item">
          <div class="device-icon">
            <i class="fa-brands fa-microsoft"></i>
          </div>
          <div class="device-info">
            <div class="device-name">Windows 10 - Chrome</div>
            <div class="device-detail">上海市 - 2025-05-16 10:30:25</div>
          </div>
          <div class="device-status">当前设备</div>
          <el-button type="text" size="small" @click="handleLogoutDevice">退出登录</el-button>
        </div>

        <div class="device-item">
          <div class="device-icon">
            <i class="fa-brands fa-apple"></i>
          </div>
          <div class="device-info">
            <div class="device-name">iOS - Safari</div>
            <div class="device-detail">北京市 - 2025-05-15 18:45:12</div>
          </div>
          <el-button type="text" size="small" @click="handleLogoutDevice">退出登录</el-button>
        </div>

        <div class="device-item">
          <div class="device-icon">
            <i class="fa-brands fa-android"></i>
          </div>
          <div class="device-info">
            <div class="device-name">Android - 小红书App</div>
            <div class="device-detail">广东省 - 2025-05-14 09:15:33</div>
          </div>
          <el-button type="text" size="small" @click="handleLogoutDevice">退出登录</el-button>
        </div>
      </div>
    </div>

    <!-- 账号安全 -->
    <div class="security-section">
      <div class="section-title">账号安全</div>

      <div class="security-item">
        <div class="item-info">
          <div class="item-icon">
            <i class="fa-solid fa-lock"></i>
          </div>
          <div class="item-content">
            <div class="item-title">账号异常提醒</div>
            <div class="item-desc">检测到异常登录时，通过短信和邮件通知您</div>
          </div>
        </div>
        <el-switch v-model="abnormalAlert" active-text="已开启" inactive-text="已关闭"></el-switch>
      </div>

      <div class="security-item">
        <div class="item-info">
          <div class="item-icon">
            <i class="fa-solid fa-ban"></i>
          </div>
          <div class="item-content">
            <div class="item-title">账号注销</div>
            <div class="item-desc">注销账号将永久删除您的所有数据</div>
          </div>
        </div>
        <el-button type="danger" size="small" @click="handleAccountDelete">注销</el-button>
      </div>
    </div>

    <!-- 两步验证 -->
    <div class="security-section" style="border-bottom: none;">
      <div class="section-title">两步验证</div>

      <div class="security-item">
        <div class="item-info">
          <div class="item-icon">
            <i class="fa-solid fa-qrcode"></i>
          </div>
          <div class="item-content">
            <div class="item-title">使用Authy验证</div>
            <div class="item-desc">使用Authy应用生成动态验证码</div>
          </div>
        </div>
        <el-button type="text" size="small" @click="handleAuthySetup">设置</el-button>
      </div>

      <div class="security-item">
        <div class="item-info">
          <div class="item-icon">
            <i class="fa-solid fa-shield-halved"></i>
          </div>
          <div class="item-content">
            <div class="item-title">恢复码</div>
            <div class="item-desc">保存恢复码，用于在无法使用验证器时登录</div>
          </div>
        </div>
        <el-button type="text" size="small" @click="handleRecoveryCodes">查看</el-button>
      </div>
    </div>
  </div>
</div>

<!-- 确认对话框 -->
<el-dialog :visible.sync="confirmDialogVisible" title="确认操作">
  <div slot="content">
    {{ confirmMessage }}
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="confirmDialogVisible = false">取消</el-button>
    <el-button type="primary" @click="handleConfirm">确定</el-button>
  </div>
</el-dialog>

<!-- 验证码对话框 -->
<el-dialog :visible.sync="verificationDialogVisible" title="验证码验证">
  <div slot="content">
    <p>请输入手机收到的验证码：</p>
    <el-input v-model="verificationCode" placeholder="请输入6位验证码"></el-input>
    <el-button @click="sendVerificationCode" :disabled="countdown > 0">
      {{ countdown > 0 ? `${countdown}秒后重新发送` : '获取验证码' }}
    </el-button>
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="verificationDialogVisible = false">取消</el-button>
    <el-button type="primary" @click="verifyCode">验证</el-button>
  </div>
</el-dialog>
</div>
</template>

<script>
export default {
  name: 'SecuritySettings',
  data() {
    return {
      showPasswordForm: false,
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      passwordRules: {
        oldPassword: [{ required: true, message: '请输入当前密码', trigger: 'blur' }],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.passwordForm.newPassword) {
                callback(new Error('两次输入的密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      },
      doubleVerification: false,
      showDevices: false,
      confirmDialogVisible: false,
      confirmMessage: '',
      verificationDialogVisible: false,
      verificationCode: '',
      countdown: 0
    }
  },
  methods: {
    handleChangePassword() {
      this.$refs.passwordFormRef.validate((valid) => {
        if (valid) {
          // 保存密码逻辑
          console.log('保存新密码:', this.passwordForm);
          this.showPasswordForm = false;
        }
      });
    },
    handleBindPhone() {
      // 绑定手机逻辑
    },
    handleBindEmail() {
      // 绑定邮箱逻辑
    },
    handleLogoutDevice() {
      // 退出设备登录逻辑
    },
    handleAccountDelete() {
      this.confirmMessage = '确定要注销账号吗？这将永久删除您的所有数据。';
      this.confirmDialogVisible = true;
    },
    handleConfirm() {
      // 确认操作逻辑
      this.confirmDialogVisible = false;
    },
    sendVerificationCode() {
      // 发送验证码逻辑
      this.countdown = 60;
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(timer);
        }
      }, 1000);
    },
    verifyCode() {
      // 验证验证码逻辑
      this.verificationDialogVisible = false;
    },
    handleAuthySetup() {
      // 设置Authy验证逻辑
    },
    handleRecoveryCodes() {
      // 查看恢复码逻辑
    }
  }
}
</script>

<style lang="scss" scoped>
  /* 安全设置卡片 */
  .security-card {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px;
  }

  .security-section {
    padding: 20px 0;
    border-bottom: 1px solid #EBEEF5;
  }

  .section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
  }

  .security-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
  }

  .item-info {
    display: flex;
    align-items: center;
  }

  .item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(254, 44, 85, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    margin-right: 16px;
  }

  .item-content {
    flex: 1;
  }

  .item-title {
    font-weight: 500;
    margin-bottom: 4px;
  }

  .item-desc {
    color: var(--gray-color);
    font-size: 14px;
  }

  /* 密码修改表单 */
  .password-form {
    max-width: 600px;
    margin-top: 20px;
  }

  .form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }

  /* 登录设备列表 */
  .device-list {
    margin-top: 16px;
  }

  .device-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #EBEEF5;
  }

  .device-item:last-child {
    border-bottom: none;
  }

  .device-icon {
    font-size: 24px;
    margin-right: 16px;
  }

  .device-info {
    flex: 1;
  }

  .device-name {
    font-weight: 500;
  }

  .device-detail {
    color: var(--gray-color);
    font-size: 14px;
    margin-top: 2px;
  }

  .device-status {
    color: #00B42A;
    font-size: 14px;
    margin-right: 16px;
  }
</style>